<template>
  <view class="container">
    <view class="page-info" @click="jumpMe">
      <u-avatar :src="state.userInfo.avatar"></u-avatar>
      <view class="info-box">
        <view>姓名：{{ state.userInfo.actualName }}</view>
        <view>部门：{{ state.userInfo.departmentName }}</view>
      </view>
      <view class="info-bot" @click="logout()">
        <u-button type="error" size="small" @click="logout()" text="退出登录"></u-button>
      </view>
    </view>
    <view v-if="state.hasNotice">
      <up-notice-bar :text="'11111111111111111'"></up-notice-bar>
    </view>
    <view class="page-container">
      <div class="page-grid">
        <view class="con-grid" :style="{ 'background': item.bgColor }" v-for="(item, index) in state.list"
              :key="index" @click="navWork(item)">
			  <i :class="item.icon" style="font-size: 28px;"></i>
          <text>{{ item.menuName }}</text>
        </view>
      </div>
    </view>
  </view>
</template>
<script setup>
import {reactive} from 'vue';
import {jumpPage} from '../../until';
import {useUserStore} from "../../store/user";

const state = reactive({
  userInfo: {},
  text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
  list: [],
  hasNotice:false
})

function navWork(item) {
  jumpPage(`index/workForm?parentMenuId=${item.menuId}`)
}

function logout() {
  useUserStore().clear();
  uni.removeStorageSync("token")
  jumpPage("login/index");
}

function loadMenu() {
  // 固定颜色列表
  const COLORS = ['#f77f00', '#00afb9', '#52796f', '#219ebc'];

  /**
   * 简单哈希函数（将字符串转换为数值）
   * @param {string} str - 输入字符串
   * @returns {number} - 哈希后的数值
   */
  function simpleHash(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
      const char = str.charCodeAt(i);
      hash = (hash << 5) - hash + char;
      hash |= 0; // 转换为32位整数
    }
    return Math.abs(hash);
  }

  // 获取菜单数据
  let filter = useUserStore().getUserInfo().menuList.filter(s => s.parentId === 17);

  // 为每个菜单项分配颜色
  state.list = filter.map(item => {
    // 使用 menuId 或 menuName 作为哈希依据（优先用ID）
    const hashKey = item.menuId?.toString() || item.menuName;
    const hashValue = simpleHash(hashKey);
    const colorIndex = hashValue % COLORS.length;

    return {
      ...item,
      bgColor: COLORS[colorIndex], // 分配背景色
    };
  });

  console.log('处理后的菜单数据:', state.list);
}

function jumpMe(){
	jumpPage("me/modifyPassword")
}


onShow(() => {
  state.userInfo = useUserStore().getUserInfo();
  loadMenu();
})
</script>
<style>
page {
  background: #f5f5f5;
}

.page-info {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #5c88e3 0%, #315EBC 100%);
  padding: 30rpx;
  border-radius: 20rpx;

  .info-box {
    flex: 1;
    line-height: 1.5;
    font-size: 32rpx;
    color: white;
    margin-left: 20rpx;

    .info-bot {
      width: 160rpx;
      margin-top: 16rpx;
    }
  }
}

.page-container {

  .page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 14rpx;

    .con-grid {
      color: white;
      height: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 10rpx;
    }
  }
}
</style>